Vue.component('keyWord', {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    plate: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      keyVehicle1: ['陕', '京', '津', '沪', '冀', '豫', '云', '辽'],
      keyVehicle2: ['黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣'],
      keyVehicle3: ['鄂', '桂', '甘', '晋', '蒙', '吉', '闽'],
      keyVehicle4: ['粤', '川', '青', '藏', '琼', '宁', '贵', '渝'],
      keyNumber: '1234567890',
      keyEnInput1: 'QWERTYUIOP',
      keyEnInput2: 'ASDFGHJKL',
      keyEnInput3: 'ZXCVBNM',
      backgroundColor: '#fff',
      keyBoardType: 1,
      buttonBorder: '1px solid #ccc',
    };
  },
  methods: {
    vehicleTap: function (event, index) {
      if (index === 1 && this.plate.length > 0) {
        return;
      }
      switch (event) {
        case 0:
          this.$emit('delete');
          this.$emit('inputchange', event);
          break;
        case 1:
          this.$emit('ok');
          break;
        case 2:
          this.$emit('exit');
          break;
        default:
          this.$emit('inputchange', event);
      }
    },
    colse_da() {
      this.$emit('3');
    },
    check() {
      if (this.keyBoardType == 1 && this.plate.length > 0) {
        this.keyBoardType = 2;
      } else if (this.keyBoardType == 2) {
        this.keyBoardType = 1;
      }
    },
  },
  template:
    '<div><div v-show="isShow" class="panel-wrap" data-value="exit" @click="colse_da"><div class="vehicle-panel" :style="{background:backgroundColor}"><div class="topItem"><span class="check" @click="check">中/英</span><span class="contentShow">{{plate}}</span><span class="exit" @click="vehicleTap(2)">取消</span></div><div v-if="keyBoardType === 1"><div class="vehicle-panel-row"><div class="vehicle-panel-row-button" v-bind:style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click="vehicleTap(item, 1)" :key="idx+item">{{item}}</div></div><div class="vehicle-panel-row"><div class="vehicle-panel-row-button" :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click="vehicleTap(item,1)" :key="idx+item">{{item}}</div></div><div class="vehicle-panel-row"><div class="vehicle-panel-row-button" :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click="vehicleTap(item, 1)" :key="idx+item">{{item}}</div><div :style="{border:buttonBorder}" class="vehicle-panel-row-button vehicle-panel-row-button-img"><img src="../assets/delete.svg" class="vehicle-en-button-delete" @click="vehicleTap(0)" mode="aspectFit" /></div></div><div class="vehicle-panel-row-last"><div class="vehicle-panel-row-button vehicle-panel-row-button-last" @click="vehicleTap(item, 1)" v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}" :key="idx+item">{{item}}</div></div></div><div v-else><div class="vehicle-panel-row"><div class="vehicle-panel-row-button vehicle-panel-row-button-number" @click="vehicleTap(item)" v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}" :key="item+idx">{{item}}</div></div><div class="vehicle-panel-row"><div class="vehicle-panel-row-button" v-bind:style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click="vehicleTap(item)" :key="idx+item">{{item}}</div></div><div class="vehicle-panel-row"><div class="vehicle-panel-row-button" :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput2" @click="vehicleTap(item)" :key="idx+item">{{item}}</div><div :style="{border:buttonBorder}" class="vehicle-panel-row-button vehicle-panel-row-button-img"><img src="../assets/delete.svg" class="vehicle-en-button-delete" @click="vehicleTap(0)" mode="aspectFit" /></div></div><div class="vehicle-panel-row-last"><div class="vehicle-panel-row-button vehicle-panel-row-button-last" @click="vehicleTap(item)" :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput3" :key="idx+item">{{item}}</div><div :style="{border:buttonBorder}" class="vehicle-panel-row-button vehicle-panel-ok" @click="vehicleTap(1)">确定 </div></div></div></div></div></div>',
});
/** c.Arthur 07/15/2020 */
new Vue({
  el: '#app',
  data: {
    keyState: false,
    plate: '',
  },
  created() {
    // TODO 例子实际开发可删除
    this.$toast("密码错误")
    API.login({
      username: 13833333333,
      password: 333333,
      recaptcha: 4,
      captchaUuid: "076f1261-bb9c-4426-bef8-89d4603bd004",
      callType: "DESKTOP"
    }).then(res => {
      console.log(res)
    })
  },
  methods: {
  },
});
